<template>
  <el-dialog :title="'部分结账'" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true">

    <!-- 新版-->
    <el-container>
      <el-container>
        <el-main style="overflow-y: auto;min-height: 350px;margin-right: 18px;">
          <el-collapse v-model="payTypeList.curr1" @change="handleChange">
            <el-collapse-item v-for="(item, index) in payTypeList.tab1List" :key="index" :title="item.name" :name="item.id">

              <el-row type="flex" class="row-bg" :gutter="20" v-if="item.xieyi == 2 && item.chuzhi == 2 ">
                <el-col :span="7">
                  <el-input size="small" type="number" placeholder="金额" v-model="item.money" @change="moneyChange(payTypeList.tab1List)">
                    <template slot="prepend">
                      金额
                    </template>
                  </el-input>
                </el-col>
                <el-col :span="8">
                  <el-radio-group v-model="item.type" @change="moneyChange(payTypeList.tab1List)" size="small">
                    <el-radio-button :label="1">收款</el-radio-button>
                    <el-radio-button :label="2">退款</el-radio-button>
                    <el-radio-button :label="3">退押金</el-radio-button>
                  </el-radio-group>
                </el-col>
                <!--                <el-col :span="4" v-if="item.sb == 1">
                      可退：<span>{{refundableAmount}}</span>
                    </el-col> -->
                <el-col :span="4">
                  <el-button size="small" class="in_block" v-if="item.sb == 2" @click="addPaysItem(item)">添加</el-button>
                </el-col>
              </el-row>

              <!-- 协议单位-->
              <el-row type="flex" class="row-bg" :gutter="20" v-if="item.xieyi == 1" style="margin-bottom: 10px;">
                <el-col :span="10">
                  <el-input size="small" type="number" placeholder="金额" :readonly="true" v-model="item.money" @change="moneyChange(payTypeList.tab1List)">

                    <template slot="prepend">
                      金额
                    </template>

                    <template slot="append">
                      <el-button icon="el-icon-search" @click="xieyiMoneySelect(item)" style="border-right: 1px solid #dcdfe6;border-radius: 0;"></el-button>
                      <el-button icon="el-icon-close" @click="xieyiMoneyClose(item,payTypeList.tab1List)"></el-button>
                    </template>

                  </el-input>
                </el-col>
                <el-col :span="12">
                  <el-input size="small" placeholder="协议单位" :readonly="true" v-model="item.customerName" @change="moneyChange(payTypeList.tab1List)">
                    <template slot="prepend">
                      协议单位
                    </template>

                    <template slot="append">
                      <el-button icon="el-icon-search" @click="xieyiXieYiSelect(item)" style="border-right: 1px solid #dcdfe6;border-radius: 0;"></el-button>
                      <el-button icon="el-icon-close" @click="xieyiSelectClose(item)"></el-button>
                    </template>

                  </el-input>
                </el-col>
              </el-row>

              <el-row type="flex" class="row-bg" :gutter="20" v-if="item.xieyi == 1">
                <el-col :span="22">
                  <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="item.remake">
                  </el-input>
                </el-col>
              </el-row>

              <!-- 储值卡 -->
              <el-row type="flex" class="row-bg" :gutter="20" v-if="item.chuzhi == 1" style="margin-bottom: 10px;">
                <el-col :span="10">
                  <el-input size="small" placeholder="金额" v-model="item.money" @change="moneyChange(payTypeList.tab1List)">

                    <template slot="prepend">
                      金额
                    </template>

                    <template slot="append">
                      <el-button icon="el-icon-search" @click="xieyiMemberSelect(item)" style="border-right: 1px solid #dcdfe6;border-radius: 0;"></el-button>
                      <el-button icon="el-icon-close" @click="xieyiMemberClose(item,payTypeList.tab1List)"></el-button>
                    </template>

                  </el-input>
                </el-col>
              </el-row>

              <el-row type="flex" class="row-bg" :gutter="20" v-if="item.chuzhi == 1 && item.memberEntity.id" style="margin-bottom: 10px;">
                <el-col :span="20">
                  <div class="customerSourceBar" style="margin-bottom: 0;">
                    <div>
                      <div class="in_block">
                        <label class="fourChar">姓名:</label>
                        <label>{{item.memberEntity.name}}</label>
                      </div>
                      <div class="in_block">
                        <label>电话:</label>
                        <label>{{item.memberEntity.tel}}</label>
                      </div>
                      <div class="in_block">
                        <label class="fourChar">级别:</label>
                        <label>{{item.memberEntity.levelName}}</label>
                      </div>
                    </div>
                    <div>
                      <div class="in_block">
                        <label>储值:</label>
                        <label>{{item.memberEntity.totalBalance}}</label>
                      </div>
                      <div class="in_block">
                        <label class="threeChar">积分:</label>
                        <label>{{item.memberEntity.totalScore}}</label>
                      </div>
                      <div class="in_block">
                        <label class="threeChar">卡号:</label>
                        <label>{{item.memberEntity.cardNo}}</label>
                      </div>
                    </div>
                  </div>
                </el-col>



              </el-row>
              <!-- 子集 -->
              <el-row type="flex" style="margin-top: 10px;" class="row-bg" :gutter="20" v-for="(son, sonIndex) in item.sons">
                <el-col :span="7">
                  <el-input size="small" type="number" placeholder="金额" v-model="son.money" @change="moneyChange(payTypeList.tab1List)">
                    <template slot="prepend">
                      金额
                    </template>
                  </el-input>
                </el-col>
                <el-col :span="8">
                  <el-radio-group v-model="son.type" @change="moneyChange(payTypeList.tab1List)" size="small">
                    <el-radio-button :label="1">收款</el-radio-button>
                  </el-radio-group>
                </el-col>
                <el-col :span="4">
                  <el-button size="small" class="in_block" @click="remPaysItem(son,item.sons)">删除</el-button>
                </el-col>
              </el-row>
            </el-collapse-item>
          </el-collapse>

        </el-main>
        <el-aside width="230px">
          <div class="my-line" style="margin:5px;">
            <div class="box_fl"><label>费用合计：</label></div>
            <div class="box_fr"><label id="lbl-fyhj">{{info.xiaofei.toFixed(2)}}</label></div>
          </div>
          <div class="my-line" style="margin:5px;">
            <div class="box_fl" style="line-height: 28px;"><label>结账优惠：</label></div>
            <div class="box_fr">
              <el-input size="mini" @change="youhuiInputChange" v-model="dataForm.discountPrice"></el-input>
            </div>
          </div>

          <div class="my-line" style="margin:5px;">
            <div class="box_fl"><label>实际应收：</label></div>
            <div class="box_fr"><label id="lbl-fyhj">{{(info.xiaofei - dataForm.discountPrice).toFixed(2)}}</label></div>
          </div>
          <div class="my-line" style="margin:5px;">
            <div class="box_fl"><label>收款：</label></div>
            <div class="box_fr"><label id="lbl-fyhj">{{info.fukuan.toFixed(2)}}</label></div>
          </div>
          <div class="my-line" style="margin:5px;">
            <div class="box_fl"><label>押金：</label></div>
            <div class="box_fr"><label id="lbl-fyhj">{{info.deposit.toFixed(2)}}</label></div>
          </div>

          <div id="box_jzys" class="my-line" style="color: forestgreen; display: block;">
            <div class="box_fl">
              <label v-if="info.priceCount >= 0">结账应收：</label>
              <label v-if="info.priceCount < 0" style="color: red;">结账应退：</label>
            </div>
            <div class="box_fr"><label id="lbl_jzys">{{Math.abs(info.priceCount).toFixed(2)}}</label></div>
          </div>

          <div id="box_jzys" class="my-line" style="color: red; display: block;margin-top: 0;">
            <div class="box_fl"><label>输入合计：</label></div>
            <div class="box_fr"><label id="lbl_jzys">{{dataForm.inputPrice.toFixed(2)}}</label></div>
          </div>
        </el-aside>
      </el-container>
      <el-footer>
        <el-container>
          <el-main style="overflow-y: auto;max-height: 320px;margin-right: 18px;padding: 0;">
            <el-input type="textarea" :rows="2" placeholder="备注" v-model="dataForm.remarks">
            </el-input>
          </el-main>
          <el-aside width="230px" style="position: relative;">
            <el-checkbox v-model="buFenPrintJieZhang">打印部分结账单</el-checkbox>
            <el-button style="bottom: 0;right: 0;position: absolute;" type="primary" icon="el-icon-check" @click="onSubMitBtn">结账</el-button>
          </el-aside>
        </el-container>
      </el-footer>
    </el-container>

    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="请扫描二维码" :visible.sync="payVisible"
      width="30%" append-to-body>
      <div v-loading="payLoding" element-loading-text="正在执行支付">
        <div style="  display: flex;
          justify-content: center;
          align-items: center;margin-bottom:10px">
          <img src="../../../../../assets/img/barCode.jpg" />
        </div>

        <div style="text-align:center">支持微信或支付宝条码支付</div>
        <div style="text-align:center">请用条码枪进行扫描</div>
        <span>
          <el-input v-model="auth_no" placeholder="请扫描二维码,支持微信支付宝" @keyup.enter.native="authClose" ref="inputFocus"></el-input>
        </span>
      </div>

    </el-dialog>

    <agreement v-if="agreementVisible" ref="agreement" @refreClosing="selectXieYiDanWei"></agreement>
    <finance v-if="financeVisible" ref="finance" @refreClosing="moneyChange(payTypeList.tab1List)"></finance>
    <memberleveldetail v-if="memberleveldetailVisible" ref="memberleveldetail" @refreClosing="moneyChange(payTypeList.tab1List)"></memberleveldetail>

  </el-dialog>
</template>

<script>
  import memberleveldetail from './xieyi/hotelmemberleveldetail.vue';
  import agreement from './xieyi/agreement.vue';
  import finance from './xieyi/finance.vue';
  export default {
    data() {
      return {
        sbEntity: {

        },
        id: 0,
        memberleveldetailVisible: false,
        timer: null,
        financeVisible: false,
        agreementVisible: false,
        printJieZhang: false,
        refundableAmountVisible: false,
        refundableAmount: 0,
        changeTypeFlag: true,
        payLoding: false,
        buFenPrintJieZhang: false,
        unitedHouseSelection: [],
        unitedHouseSelectionId: [],
        stepsCurr: 1,
        tabs: {
          curr: 'first',
          tab1Money: 0.0,
          tab2Money: 0.0,
          tab3Money: 0.0
        },
        info: {
          totlPrice: 0,
          priceCount: 0,
          deposit: 0,
          fukuan: 0,
          roomPrice: 0,
          totlxfPrice: 0,
          xiaofei: 0,
          roomNames: [],
        },
        payTypeList: {
          tab1List: [],
          tab2List: [],
          tab3List: [],
          curr1: [],
          curr2: [],
          curr3: []
        },
        curr: '',
        visible: false,
        item: {},
        mainCheck: false,
        payInterfaceConfig: {}, //支付
        payVisible: false,
        auth_no: '',
        deposit: 0,
        xiaofei: 0,
        dataListLoading: false,
        fukuan: 2,
        dataList: [],
        arr: [],
        shopDataList: [],
        options: {
          paysTypeOptions: [],
          peopleOptions: []
        },
        dataForm: {
          id: 0,
          inputPrice: 0,
          discountPrice: 0,
          remarks: '',
          youhuiPrice: 0,
          sellerId: '',
          consumeId: '',
          payType: '',
          creatTime: '',
          payPrice: 0,
          banks: '',
          banksNumber: '',
          referenceNumber: '',
          termValidity: '',
          peopleId: '',
          remarks: '',
          nowType: '',
          type: ''
        },
        dataRule: {
          sellerId: [{
            required: true,
            message: '商家不能为空',
            trigger: 'blur'
          }]
        },
        activeName: 'first'
      };
    },

    components: {
      agreement,
      finance,
      memberleveldetail
    },
    methods: {
      shopChange(arr) {
        this.info.xiaofei = 0;
        this.info.fukuan = 0;
        this.info.deposit = 0;
        arr.forEach(item => {
          // 账单类型（0预收账款1信用卡授权2消费3押金4房费5预收退款6结账收款7结账退款8退押金）
          if (item.payType == 2) {
            this.info.xiaofei += parseFloat(item.payPrice);
          }
          if (item.payType == 4) {
            this.info.xiaofei += parseFloat(item.payPrice);
          }
          if (item.payType == 0) {
            this.info.fukuan += parseFloat(item.payPrice);
          }
          if (item.payType == 5) {
            this.info.fukuan -= parseFloat(item.payPrice);
          }
          if (item.payType == 6) {
            this.info.deposit -= parseFloat(item.payPrice);
          }
        });

        //计算价格
        this.dataForm.payPrice = this.xiaofei - this.fukuan;

      },
      init(arr, peopleId, singleId) {
        Object.assign(this.$data, this.$options.data());
        this.arr = arr;
        this.shopChange(arr);
        this.visible = true;
        this.info.singleId = singleId;
        this.getPayTypes();
        this.getPayInterface();
        if (this.$cookie.get('buFenPrintJieZhang') != null) {
          if (this.$cookie.get('buFenPrintJieZhang') == 1) {
            this.buFenPrintJieZhang = true
          } else {
            this.buFenPrintJieZhang = false
          }
        }
        this.$forceUpdate();
        
        this.$nextTick(() => {
          this.dataForm.peopleId = peopleId;
        });
      },
      selectXieYiDanWei() {

      },
      xieyiMoneySelect(item) {
        this.financeVisible = true;
        this.$nextTick(() => {
          this.$refs.finance.init(item, this.unitedHouseSelectionId)
        })
      },
      xieyiMemberSelect(item) {
        this.memberleveldetailVisible = true;
        this.$nextTick(() => {
          this.$refs.memberleveldetail.init(item)
        })
      },
      xieyiXieYiSelect(item) {
        this.agreementVisible = true;
        this.$nextTick(() => {
          this.$refs.agreement.init(item)
        })
      },
      xieyiMoneyClose(item, list) {
        item.money = 0;
        this.moneyChange(list);
      },
      xieyiMemberClose(item, list) {
        item.money = 0;
        item.memberEntity.id = ''
        item.memberEntity.name = ''
        item.memberEntity.tel = ''
        item.memberEntity.levelName = ''
        item.memberEntity.totalBalance = ''
        item.memberEntity.totalScore = ''
        item.memberEntity.cardNo = ''
        this.moneyChange(list);
      },
      xieyiSelectClose(item) {
        item.customerId = "";
        item.customerName = "";
      },
      addPaysItem(payItem) {
        payItem.sons.push({
          ...payItem,
          sysType: payItem.type,
          money: 0,
          type: 1,
        })
      },
      //查询扫呗预授权金额
      getsbMoney() {
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinpeople/view_ysq_money_all`),
          method: 'get',
          params: this.$http.adornParams({
            roomIds: this.unitedHouseSelectionId.join(","),
            singleId: this.item.singleId
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.refundableAmount = data.money
          } else {
            this.$message.error(data.msg)
          }
        })
      },
      remPaysItem(sonInfo, sonsArr) {
        sonsArr.splice(sonsArr.indexOf(sonInfo), 1);
        this.moneyChange(this.payTypeList.tab1List);
      },
      getPayInterface() {
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelsellerpayinterfaceconfig/myInfo`),
          method: 'get'
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.payInterfaceConfig = data.tHotelSellerPayInterfaceConfig
          } else {
            this.$message.error("加载支付配置失败")
          }
        })
      },
      handleChange(val) {
        console.log(val);
      },
      moneyChange(list) {
        var currMoney = 0;
        var currMoney1 = 0;
        var currMoney2 = 0;
        list.forEach(item => {
          if(!item.money){
            item.money = 0;
          }
          if (item.type == 1) {
            currMoney += parseFloat(item.money);
          } else if (item.type == 2) {
            currMoney1 += parseFloat(item.money);
          } else {
            currMoney2 += parseFloat(item.money);
          }
          if (item.sons.length > 0) {
            item.sons.forEach(son => {
              if (son.type == 1) {
                currMoney += parseFloat(son.money);
              } else if (son.type == 2) {
                currMoney1 += parseFloat(son.money);
              } else {
                currMoney2 += parseFloat(son.money);
              }
            })
          }
        });
        //收款
        this.tabs.tab1Money = currMoney;
        //退款
        this.tabs.tab2Money = currMoney1;
        //退押金
        this.tabs.tab3Money = currMoney2;
        //计算本次输入金额的合
        this.dataForm.inputPrice = currMoney - currMoney1 - currMoney2
      },
      youhuiInputChange() {
        this.info.priceCount = this.info.roomPrice + this.info.xiaofei - (this.info.fukuan + this.info.deposit) -
          parseFloat(this.dataForm.discountPrice)
        console.log(this.payTypeList.tab1List)
        var entity = this.payTypeList.tab1List.filter(item => item.sysType == 4)[0]
        console.log("改成价格")
        console.log(entity)
        if (this.info.priceCount > 0) {
          entity.money = this.info.priceCount.toFixed(2)
        } else {
          entity.money = Math.abs(this.info.priceCount).toFixed(2)
          entity.type = 2
        }
        this.moneyChange(this.payTypeList.tab1List);
      },
      //获取支付方式
      getPayTypes() {
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelfloorroompaytype/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: 1,
            limit: 999,
            isClosing: 1,
            state: 1,
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            var arr = []
            data.page.list.forEach(item => {
              arr.push(item.id)
            })
            this.payTypeList.curr1 = arr
            // type 1收款 2退款 3退押金
            this.payTypeList.tab1List = data.page.list.map(item => ({
              ...item,
              sysType: item.type,
              money: 0,
              type: 1,
              sons: []
            }));

            var newArr = [];
            this.payTypeList.tab1List.forEach(item => {
              if (item.sb == 2) {
                newArr.push({
                  ...item
                })
              } else {
                this.sbEntity = item;
              }
            })

            this.youhuiInputChange()
          }
        });
      },
      //结账
      onSubMitBtn() {
        if (this.buFenPrintJieZhang) {
          this.$cookie.set('buFenPrintJieZhang', 1)
        } else {
          this.$cookie.set('buFenPrintJieZhang', 2)
        }

        var idArr = [];
        this.arr.forEach(item => {
          idArr.push(item.id);
        });
        var arr = []
        for (var i = 0; i < this.payTypeList.tab1List.length; i++) {
          var item = this.payTypeList.tab1List[i];
          if (item.money != 0) {
            if (item.xieyi == 1) {
              console.log(!item.customerName)
              console.log(item.customerName)
              if (!item.customerName) {
                this.$message.error("操作失败：请选择协议单位");
                return
              }
              console.log(!item.customerId)
              if (!item.customerId) {
                this.$message.error("操作失败：请选择协议单位");
                return
              }
            }
            if (item.chuzhi == 1) {
              if (!item.memberEntity.id) {
                this.$message.error("操作失败：请选择会员");
                return
              }
            }
            arr.push({
              money: item.money,
              type: item.type,
              id: item.id,
              sb: item.sb,
              remake: item.remake == null ? "" : item.remake,
              xieyi: item.xieyi,
              chuzhi: item.chuzhi,
              customerId: item.customerId,
              memberId: item.memberEntity.id + ""
            })
          }
          if (item.sons.length > 0) {
            item.sons.forEach(son => {
              if (son.money != 0) {
                arr.push({
                  money: son.money,
                  type: son.type,
                  id: son.id,
                  sb: item.sb,
                  remake: item.remake == null ? "" : item.remake,
                  xieyi: item.xieyi,
                  chuzhi: item.chuzhi,
                  customerId: item.customerId,
                  memberId: item.memberEntity.id + ""
                })
              }
            })
          }
        }
        //对比输入是否正确
        console.log(this.dataForm.inputPrice.toFixed(2))
        console.log(this.info.priceCount.toFixed(2))
        if (this.dataForm.inputPrice.toFixed(2) != this.info.priceCount.toFixed(2)) {
          this.$message.error("操作失败：本次输入必须等于结账应收");
          return false
        }

        if (this.payInterfaceConfig.switchConfig == 1) {
          //触发
          if (this.sbEntity.money > 0) {
            if (this.sbEntity.type == 1) {
              this.payVisible = true;
              this.changeFocus();
              return
            } else {
              if (this.sbEntity.money > this.refundableAmount) {
                this.$message.error("退款金额不可超过已授权可退金额")
                return
              } else {

              }
            }
          }
        }
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinaccounting/partialSettlement`),
          method: 'post',
          data: this.$http.adornData({
            peopleId: this.dataForm.peopleId,
            prices: JSON.stringify(arr),
            payPrice: this.dataForm.inputPrice,
            discountPrice: this.dataForm.discountPrice,
            remarks: this.dataForm.remarks,
            submitIds: idArr.join(','),
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.visible = false
            this.$nextTick(() => {
              if (this.buFenPrintJieZhang) {
                this.$emit('printJieZhangClosing',data.id);
              }
              this.$emit('refreClosing');
            });
            this.$message({
              message: this.$t('Common.OperationSuccessful'),
              type: 'success',
              duration: 1500,
              onClose: () => {

              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      },
      changeFocus() {
        this.$nextTick(() => {
          this.$refs.inputFocus.focus();
        })
      },
      authClose() {
        // this.payVisible = false;
        this.payLoding = true;
        //扫码支付请求数据
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelsellerpayinterfaceconfig/preAuthBar'),
          method: 'post',
          data: this.$http.adornData({
            'type': 2, //正式
            'auth_no': this.auth_no, //授权码，客户的付款码
            'total_fee': this.sbEntity.money * 100, //金额，单位分
            'order_body': '结账退房', //订单描述
            'attach': '结账退房', //附加数据,原样返回
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            console.log(data)
            this.payVisible = false
            //保存入账信息
            this.auth_no = "";
            this.payLoding = false;
            var terminalTrace = data.data.terminalTrace
            this.authSubForm(terminalTrace);
          } else if (data.code == 3) {
            //循环查询订单，直至成功或失败
            this.timer = setInterval(() => {
              this.queryOrder(data.data);
            }, 1500);
          } else {
            this.payLoding = false;
            this.auth_no = "";
            this.payVisible = false
            this.$message.error(data.msg);
          }
        })
      },
      queryOrder(data) {
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelsellerpayinterfaceconfig/commonQuery'),
          method: 'post',
          data: this.$http.adornData({
            'pay_type': data.payType,
            'terminal_trace': data.terminalTrace,
            'terminal_time': data.terminalTime,
            'out_trade_no': data.outTradeNo,
          })
        }).then(({
          data
        }) => {
          console.log(data)
          if (data && data.code === 0) {
            clearInterval(this.timer)
            this.payLoding = false;
            console.log(data)
            this.payVisible = false
            this.auth_no = "";
            //保存入账信息
            var terminalTrace = data.data.terminalTrace
            this.authSubForm(terminalTrace);
          } else if (data.code === 3) {

          } else {
            clearInterval(this.timer)
            this.payLoding = false;
            this.payVisible = false
            this.auth_no = "";
            this.$message.error(data.msg);
          }
        })
      },
      authSubForm(terminalTrace) {
        var idArr = [];
        this.arr.forEach(item => {
          idArr.push(item.id);
        });
        var arr = []
        this.payTypeList.tab1List.forEach(item => {
          if (item.money != 0) {
            arr.push({
              money: item.money,
              type: item.type,
              id: item.id,
              sb: item.sb,
            })
          }
          if (item.sons.length > 0) {
            item.sons.forEach(son => {
              if (son.money != 0) {
                arr.push({
                  money: son.money,
                  type: son.type,
                  id: son.id,
                  sb: item.sb,
                })
              }
            })
          }
        });
        let _this = this
        setTimeout(function() {
          _this.$http({
            url: _this.$http.adornUrl(`/hotel/thotelfloorroomcheckinaccounting/partialSettlement`),
            method: 'post',
            data: _this.$http.adornData({
              terminalTrace: terminalTrace,
              peopleId: this.dataForm.peopleId,
              prices: JSON.stringify(arr),
              payPrice: this.dataForm.inputPrice,
              discountPrice: this.dataForm.discountPrice,
              remarks: this.dataForm.remarks,
              submitIds: idArr.join(','),
            })
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              _this.visible = false
              _this.$message({
                message: _this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  _this.$nextTick(() => {
                    _this.$emit('refreClosing')
                  });
                }
              });
            } else {
              _this.$message.error(data.msg);
            }
          });

        }, 1000);

      },
    }
  };
</script>

<style lang="scss" scoped>
  .closingRoomSteps .el-step.is-simple .el-step__head {
    display: inherit;
  }

  .my-line {
    margin: 10px 5px;
    float: left;
  }

  .box_fl {
    position: relative;
    width: 109px;
    float: left;
    font-size: 16px;
  }

  .box_fr {
    position: relative;
    width: 109px;
    float: right;
    font-size: 16px;
    text-align: right;
    padding-right: 12px;
  }

  body>div.el-dialog__wrapper>div>div.el-dialog__body>section>section>aside div.box_fr>div>input {
    text-align: right;
  }

  .booking_circle_span,
  .orange_circle_span {
    display: inline-block;
    vertical-align: middle;
  }

  .booking_circle_span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #f24e4c;
    border: 1px solid #f24e4c;
    font-size: 12px;
    text-align: center;
    line-height: 16px;
  }

  .customerSourceBar {
    padding: 8px 16px;
  }

  .customerSourceBar>div>.in_block:nth-of-type(2) {
    width: 37%;
  }

  .customerSourceBar>div>.in_block:first-of-type {
    width: 26%;
  }

  .in_block {
    display: inline-block;
  }

  .el-dialog__wrapper /deep/ .el-dialog {
    width: 70%;

    .el-footer {
      padding-right: 0;
    }

    /deep/ .el-aside {
      white-space: nowrap;
    }
  }

  @media only screen and (max-width: 1180px) {
    .el-dialog__wrapper /deep/ .el-dialog {
      width: 100%;
    }
  }
</style>
